<style scoped>
.product-item-form-content {
  max-width: 1200px;
  min-width: 960px;
}
.product-item-form-content /deep/ .el-tabs__header .el-tabs__nav-wrap {
  padding-left: 0;
}
.product-item-form-content /deep/ .el-tabs__header .el-tabs__item {
  font-size: 14px;
  padding:0 20px;
}
.product-item-form-content /deep/ .el-tabs__header .el-tabs__item:nth-child(2) {
  padding-left: 20px;
}
.product-item-form-content /deep/ .el-tabs__header .el-tabs__item:last-child {
  padding-right: 20px;
}
.product-item-form-content .label-title .icon {
  color: #303133;
  margin-right: 4px;
}
.product-item-form-content .label-title .title {
  margin-right: 4px;
}
.product-item-form-content .label-title .icon:hover {
  color: #409eff;
}
.product-item-form-content /deep/ .el-tabs__nav-next, .product-item-form-content /deep/ .el-tabs__nav-prev{
  z-index: 99;
}
</style>
<!--  -->
<template>
  <div class="product-item-form-content">
    <el-button
      type="primary"
      size="small"
      @click="addTab()"
    >
      新增标签
    </el-button>
    <div style="height:12px;"></div>
    <el-tabs
      type="border-card"
      v-model="editableTabsValue2"
    >
      <el-tab-pane
        v-for="(item, index) in labelContent"
        :key="index"
        :name="''+index"
      >
        <span slot="label">
          <div class="label-title">
            <span class="title">{{item.title}}</span>
            <i
              class="icon iconfont icon-jiantouarrow506"
              v-if="!(index === 0)"
              @click.stop="leftTag(index)"
            ></i>
            <i
              class="icon iconfont icon-jiantouarrow484"
              v-if="!(labelContent.length === 1 || (labelContent.length - 1) === index)"
              @click.stop="rightTag(index)"
            ></i>
            <i
              class="icon el-icon-edit"
              @click.stop="editTag(index)"
            ></i>
            <i
              class="icon el-icon-delete"
              v-if="!(labelContent.length === 1)"
              @click.stop="deleteTag(index)"
            ></i>
          </div>
        </span>
        <div>
          <Ue
            :defaultValue="item.content"
            :id="'contentid'+index"
            :ref="'contentref'+index"
          ></Ue>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Ue from '@/components/common/ueditor/Ue.vue'
export default {
  props: {
    system: {
      type: Object
    },
    labelContent: {
      type: Array
    },
    resetLabelContent: {
      type: Function
    }
  },
  data () {
    return {
      editableTabsValue2: '' + 0
    }
  },
  watch: {
    labelContent: {
      handler (newValue) {
        this.$nextTick(() => {
          newValue.forEach((element, index) => {
            this.setContent(index, element.content)
          })
        })
      },
      deep: true
    }
  },
  methods: {
    getContent (index) {
      return this.$refs['contentref' + index][0].getUEContent()
    },
    setContent (index, content) {
      this.$nextTick(() => {
        this.$refs['contentref' + index][0].setUEContent(content)
      })
    },
    // 添加tag
    addTab () {
      this.$prompt('请输入标签名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValidator: (item) => {
          if (!item) {
            return '请输入标签名称'
          }
          if (item.length > 64) {
            return '标签名不能超过64个字符'
          }
          return true
        }
      }).then(({ value }) => {
        let labelContent = JSON.parse(JSON.stringify(this.labelContent))
        if (labelContent.length > 9) {
          this.$message.error('产品内容信息数量不能超过10个')
          return
        }
        let maxOrderNum = 0
        for (let i in labelContent) {
          if (labelContent[i].orderNum > maxOrderNum) {
            maxOrderNum = labelContent[i].orderNum
          }
          labelContent[i].content = this.getContent(i)
        }
        maxOrderNum++
        labelContent.push({ id: 0, title: value, content: '', orderNum: maxOrderNum })
        this.editableTabsValue2 = '' + (labelContent.length - 1)
        this.resetLabelContent(labelContent)
      }).catch(() => {
      })
    },
    // 编辑tag
    editTag (index) {
      let labelContent = JSON.parse(JSON.stringify(this.labelContent))
      let inputValue = ''
      for (let i in labelContent) {
        if (parseInt(index) === parseInt(i)) {
          inputValue = labelContent[i].title
        }
        labelContent[i].content = this.getContent(i)
      }
      this.$prompt('修改标签名称', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputValue: inputValue,
        inputValidator: (item) => {
          if (!item) {
            return '请输入标签名称'
          }
          if (item.length > 64) {
            return '标签名不能超过64个字符'
          }
          return true
        }
      }).then(({ value }) => {
        labelContent[index].title = value
        this.resetLabelContent(labelContent)
      }).catch(() => {
      })
    },
    // 删除 tag
    deleteTag (index) {
      let labelContent = []
      let time = 0
      for (let i in this.labelContent) {
        if (parseInt(index) === parseInt(i)) {
          continue
        }
        let item = JSON.parse(JSON.stringify(this.labelContent[i]))
        item.orderNum = time++
        item.content = this.getContent(i)
        labelContent.push(item)
      }
      if (parseInt(this.editableTabsValue2) >= labelContent.length) {
        this.editableTabsValue2 = '' + (labelContent.length - 1)
      }
      this.resetLabelContent(labelContent)
    },
    // 左移
    leftTag (index) {
      let init = JSON.parse(JSON.stringify(this.labelContent))
      for (let i in init) {
        init[i].content = this.getContent(i)
      }
      let labelContent = []
      let temp
      let item
      let time = 0
      for (let i in init) {
        if ((parseInt(index) - 1) === parseInt(i)) {
          temp = init[i]
          continue
        } else {
          item = init[i]
        }
        item.orderNum = time++
        labelContent.push(item)

        if (parseInt(index) === parseInt(i)) {
          temp.orderNum = time++
          labelContent.push(temp)
        }
      }
      this.editableTabsValue2 = '' + (parseInt(index) - 1)
      this.resetLabelContent(labelContent)
    },
    // 右移
    rightTag (index) {
      let init = JSON.parse(JSON.stringify(this.labelContent))
      for (let i in init) {
        init[i].content = this.getContent(i)
      }
      let labelContent = []
      let temp
      let item
      let time = 0
      for (let i in init) {
        if (parseInt(index) === parseInt(i)) {
          temp = init[i]
          continue
        } else {
          item = init[i]
        }
        item.orderNum = time++
        labelContent.push(item)

        if ((parseInt(index) + 1) === parseInt(i)) {
          temp.orderNum = time++
          labelContent.push(temp)
        }
      }
      this.editableTabsValue2 = '' + (parseInt(index) + 1)
      this.resetLabelContent(labelContent)
    }
  },
  components: {
    Ue
  }
}

</script>
